<template>
  <!-- 新结算日账单 -->
  <div class="home-page-container">
    <!-- search 查询 -->
    <el-card shadow="never">
      <mer-search :searchConfig="formConfig" :searchBar="searchBar"
        @search="search"
        @reset="reset(initQuery)"
        @changeTime="(value,model)=>changeTime(value,'searchBar', 'minTime', 'maxTime')"
        :loading="tableLoading">
      </mer-search>
    </el-card>
    <!-- table 表格 -->
    <el-card shadow="never">
      <mer-table :loading="tableLoading"
        :tableConfig="tableConfig"
        :tableData="tableData"
        :pagination="pagination"
        @SizeChange="handleSizeChange"
        @PageChange="pageChange"
        :hasIndex="false">
        <template slot="handler"  slot-scope="{row}">
          <el-button size="small" v-if="[0].includes(row.status)" @click="handleModal('advance', row)">预约确认</el-button>
          <el-button size="small" v-if="[1].includes(row.status)" @click="handleModal('confirm', row)">加油确认</el-button>
          <el-button size="small" v-if="[0, 1].includes(row.status)" @click="handleModal('cancel', row)">取消订单</el-button>
          <el-button size="small" v-if="[3].includes(row.status)" @click="handleModal('detail', row)">详情</el-button>
        </template>
      </mer-table>
    </el-card>
    <oilConfirmModal ref="oilConfirmModal" @handleBtn="handleBtn"/>
    <orderModal ref="orderModal" @handleBtn="handleBtn"/>
    <cancelModal ref="cancelModal" @handleBtn="handleBtn"/>
    <detailModal ref="detailModal" @handleBtn="handleBtn"/>
  </div>
</template>
<script>
// (0, "已预约"),(1, "已确认"),(3, "已取消")
import listPage from '@/mixins/listPage'
import queryMix from '@/views/finance/mixins/query';
import oilConfirmModal from './components/oilConfirmModal'
import orderModal from './components/orderModal'
import cancelModal from './components/cancelOrder'
import detailModal from './components/detail'
import { reservationOrderByPage, reservationOrderStatus } from '@/api/order'


  // 查询表单配置
let formConfig = [
  { label: '订单号', type: 'input', modelName: 'orderNo', placeholder: '请输入准确的订单号', maxlength: 100 },
  { label: '手机号', type: 'input', modelName: 'phoneNo', placeholder: '请输入11位手机号码' },
  { label: '订单状态', type: 'select', modelName: 'status', placeholder: '全部', selectOptions: [], define: true, selectLabel: 'label', selectValue: 'value' },
  { label: '预约时间', type: 'date', modelName: 'tradeTime', model: '', dateType: 'datetimerange', format: 'yyyy-MM-dd HH:mm:ss',pickerOptions:{}, clearable:false}
]
// 表格参数配置
let tableConfig = [
  { label: '订单号', prop: 'orderNo', width: 150 },
  { label: '用户手机号', prop: 'customerPhone', width: 136  },
  { label: '油号', prop: 'oilNoName', width: 136 },
  { label: '预约加油吨数', prop: 'ton', width: 136},
  { label: '船名', prop: 'shipNumber', width: 136},
  { label: 'MMSI', prop: 'mmsi', width: 136 },
  { label: '油品单价', prop: 'gunPrice', width: 136 },
  { label: '预约时间', prop: 'deliveryDt', width: 136 },
  { label: '订单状态', prop: 'statusName', width: 156 },
  { label: '操作', slot: 'handler', fixed: 'right',  width: 300},
]
export default {
  name: 'bill_dailyBill',
  mixins:[ listPage, queryMix ],
  data(){
    return{
      tradeTime:'',
      formConfig: formConfig,
      tableConfig: tableConfig,
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.selectDate = minDate.getTime();
          if (maxDate) {
            this.selectDate = ''
          }
        },
        // 限制时间选择范围366天
        disabledDate: (time) => {
          if (this.selectDate !== '') {
            const one = 60 * 24 * 3600 * 1000;
            const minTime = this.selectDate - one;
            const maxTime = this.selectDate + one;
            return time.getTime() < minTime || time.getTime() > maxTime
          }
        }
      }
    }
  },
  created(){
    this.initPage()
  },
  components: {
    oilConfirmModal,
    orderModal,
    cancelModal,
    detailModal
  },
  methods:{
    initPage () {
      this.initQuery()
      // 获取订单状态下拉框接口
      this.getQueryStatus()
      this.initList(reservationOrderByPage, false)
    },  
    // 设置默认查询条件，默认时间间隔7天
    initQuery () {
      this.tradeTime = ''
      this.initTime('tradeTime', -6, 'searchBar',true, 'minTime', 'maxTime')
      const { tradeTime, pickerOptions } = this
      const initObj = { tradeTime: [tradeTime, pickerOptions] }
      this.setSearchConfig(initObj)
    },
    // 打开弹框
    handleModal (type, val) {
      switch (type) {
        case 'advance':
          this.$refs.orderModal.init(val)
          break
        case 'confirm':
          this.$refs.oilConfirmModal.init(val)
          break
        case 'cancel':
          this.$refs.cancelModal.init(val)
          break
        case 'detail':
          this.$refs.detailModal.init(val)
      }
    },
    // 确认按钮，刷新列表页面接口
    handleBtn () {
      this.initPage()
    },
    // 获取订单状态
    async getQueryStatus(){
      try{
        const { code, result = [] } = await reservationOrderStatus()
        if(code !== 200) return
        const initObj = { status: this.optionsWrapper(result) }
        this.setSearchConfig(initObj)
      }catch(err){
        console.log(err)
      }
    }
  }
}
</script>
<style lang="less" scoped>
.home-page-container{
  margin-top: 20px;
}
</style>